<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>团购</title>
    <link rel="stylesheet" type="text/css" href="main3(团购).css  "/>
    <script type="text/javascript "  src="js/jquery.js"></script>
    <script type="text/javascript " src="js/main.js"></script>

</head>
<body>
<div id="all">
    <div class="top">
        <div class="container">
            <ul class="drop">
                <li class="drop-menu">
                    <a class="jiamiao123" style="position:absolute;left:1000px;top:10px;"href="javascript:void(0)">jiamiao123 |</a>
                    <ul class="drop-contenta">
                        <li><a href="#">个人设置</a></li>
                        <li><a href="#">账号绑定</a></li>
                        <li><a href="#">退出</a></li>

                    </ul>
                </li>
                <li  style="position:absolute;left:1090px;top:10px;" ><a href="javascript:void(0)">消息<a style="color:red;">3</a></a></li>

                <li class="drop-menu" >
                    <a class="a" style="position:absolute;left:1160px;top:10px;" href="javascript:void(0)">我的收藏  |</a>
                    <ul  class="drop-contentb">

                        <li><a  href="#">收藏的商品</a></li>
                        <li><a href="#">收藏的小店</a></li>
                        <li><a href="#">浏览足记</a></li>

                    </ul>
                </li>
                <li  style="position:absolute;left:1240px;top:10px;"><a href="javascript:void(0)">我的订单  |</a></li>
                <li  style="position:absolute;left:1310px;top:10px;">
                    <img style="width:20px;height:20px;top:10px;"src="img2/11.jpg" alt=""/><a href="">
                    购物车<a style="color:red;">1</a><a href="">件</a></a></li>


                <li class="drop-menu" >
                    <a class="kehu"  href="javascript:void(0)" style="position:absolute;left:1400px;top:10px;">客户服务   |</a>
                    <ul  class="drop-contentc" >

                        <li><a href="#">消费者服务</a></li>
                        <li><a href="#">商家服务</a></li>
                        <li><a href="#">规则中心</a></li>

                    </ul>
                </li>

                <li class="drop-menu">
                    <img style="width:20px;height:20px;position:absolute;left:1480px;top:10px;"
                         src="img2/12.jpg" alt=""/>
                    <a  class="xiaodian" style="position:absolute;left:1500px;top:10px;"href="javascript:void(0)">我的小店  |</a>
                    <ul  class="drop-contentd" >

                        <li><a href="#">管理后台</a></li>
                        <li><a href="#">商家社区</a></li>
                        <li><a href="#">商家培训</a></li>
                        <li><a href="#">市场入驻</a></li>

                    </ul>
                </li>
                <div class="clear:both;"></div>
            </ul>
            </ul>
            <div class="clr"></div>





        </div>




    </div>

    <div class="nav">
        <div class="nav-in">
            <!-- 这里的全部分类以绝对定位的形式定位到导航栏中-->
            <div class="allnav">
                <div class="mt">
                    <h2 ><a style="color:white;margin-left:400px;font-size:25px;" href="#">
                       <b>团购 | </b> </a>
                        <a style="color:white;"href="">每日十点开始</a></h2>

                </div>
                <div class="mc">
                    <div class="part1" style="margin-top:60px;">
                            <span><h3>
                                <a style="position:absolute;left:0px;margin-left:20px;"href="#">精选 ></a>
                                <a style="margin-left:80px;" href="#">女装 ></a>
                            </h3></span>
                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>
                    <div class="part2" style="margin-top:40px;">

                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>

                    <div class="part2" style="margin-top:40px;">
                             <span><h3>
                                 <a style="position:absolute;left:0px;margin-left:20px;" href="#">鞋子 > </a>
                                 <a  style="margin-left:80px;" href="#">箱包 ></a>
                             </h3></span>
                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>

                    <div class="part2" style="margin-top:40px;">
                             <span><h3>
                                 <a  style="position:absolute;left:0px;margin-left:20px;" href="#">美妆 > </a>
                                 <a  style="margin-left:80px;"href="#">男友 ></a>
                             </h3></span>
                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>

                    <div class="part2" style="margin-top:40px;">
                             <span><h3>
                                 <a style="position:absolute;left:0px;margin-left:20px;" href="#">生活  > </a>
                                 <a style="margin-left:80px;" href="#">内衣 ></a>
                             </h3></span>
                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>

                    <div style="border-top:1px silver dashed;margin-top:30px;"></div>

                    <div class="part2" style="margin-top:40px;">
                             <span><h3>
                                 <a style="color:deeppink;position:absolute;left:0px;margin-left:20px;
                               " href="#">热门</a>
                                 <a  style="color:deeppink;margin-left:60px;" href="#">搜索</a>
                             </h3></span>
                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>


                    <div class="part2" style="margin-top:30px;">
                             <span><h3>
                              <button style="height:30px;margin-left:10px; background-color:lightgrey;">牛仔短裤</button>
                                 <button style="height:30px; background-color:lightgrey;">凉鞋</button>
                             </h3></span>
                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>


                    <div class="part2" style="margin-top:28px;">
                             <span><h3>
                                <button style="height:30px;margin-left:10px; background-color:lightgrey;">T恤</button>
                                 <button style="height:30px; background-color:lightgrey;">链条包</button>
                             </h3></span>
                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>




                    <div class="part2" style="margin-top:18px;">
                             <span><h3>
                               <button style="height:30px;margin-left:10px; background-color:lightgrey;">连衣裙</button>
                                 <button style="height:30px; background-color:lightgrey;">补水面膜</button>
                             </h3></span>
                        <div class="i-mc"></div> <!--导航展出的时候的下拉 -->
                    </div>
                </div>
            </div>
            <ul class="mainnav">


                <li  style="margin-left:30px;margin-top:0px;background:red;height:65px;width:80px;" class="fl" >
                    <a style="color:white;position:absolute;left:50px;top:10px;" href="#">首页</a></li>
                <li style="margin-left:30px;margin-top:10px;"class="fl"><a style="color:white;"href="#">品牌 剁手特卖</a></li>
                <li style="margin-left:30px;margin-top:10px;"class="fl"><a style="color:white;" href="#">囤货团</a></li>
                <li style="margin-left:450px;margin-top:10px;"class="fl"><a  style="color:white;"href="#">7天无理由退货</a></li>
                <li style="margin-left:10px;margin-top:10px;"class="fl"><a  style="color:white;"href="#">30天内最低价</a></li>

            </ul>

            <div id="box">
                <ul class="list" style="width:700px; height:500px;position:absolute;
            left:-170px;top:-20px;">
                    <li style=""class="current">
                        <img style="height:500px;width:800px;" src="img/86.jpg"  /></li>

                    <li style="float:right;;"><img style="height:500px;width:800px;"src="img/84.jpg"/></li>

                </ul>
                <ul class="count" style="position:absolute;left:450px;top:400px;">
                    <li class="current">1</li>
                    <li>2</li>

                </ul>

            </div>
          <div class="one">
              <div class="one1">
                  <img style="height:160px;"src="img/87.png" alt=""/>

              </div>
              <div>
                  <img style="height:160px;"src="img\88.png" alt=""/>

              </div>
              <div>
                  <img style="height:160px;" src="img\89.png" alt=""/>
              </div>


        </div>

        </div>
    </div>


    <div class="two2">
        <p1 style="font-size:25px;position:absolute;left:400px;
        top:750px;"><strong>品牌 剁手特卖</strong></p1>
        <p2 style="position:absolute;left:600px;top:750px;font-size:18px;">精选好店  超值满减</p2>
        <button style="position:absolute;left:1500px;top:750px;width:100px;height:30px;
        border-radius:20px;background-color:deeppink; color:white;">全部剁手特卖</button>


    </div>
  <div class="two" style="position:absolute;left:400px;
  width:1200px;height:200px;top:800px;border:1px solid #ccc;">

      <div class="two1">
          <img style="height:160px;position:absolute;left:420px;top:10px;"src="img\90.jpg" alt=""/>

      </div>
      <div>
          <img style="height:160px;position:absolute;left:20px;top:10px;"src="img\91.jpg" alt=""/>

      </div>
      <div>
          <img style="height:160px;position:absolute;left:800px;top:10px;" src="img\92.jpg" alt=""/>
      </div>


  </div>

    <div class="three">
        <div class="md">
            <h2 ><a style="color:black;font-size:25px;"href="#">商品团</a>
                <a style="color:gray;margin-left:10px;"  href="">每日10点开始   | </a></h2>
               <p1 style="position:absolute;left:1000px;top:0px;color:deeppink;">默认 |</p1>
              <p2  style="position:absolute;left:1040px;top:0px;">  最新  |</p2>
               <p3  style="position:absolute;left:1080px;top:0px;">销量  |</p3>
              <p4  style="position:absolute;left:1120px;top:0px;">价格</p4>
        </div>
        <div >
            <ul class="three2" style="position:absolute; top:40px;width:1200px;height:50px;background-color:lightgrey;">
                <li  style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl" ><a >精选  |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a href="#">女装 |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a  href="#">女鞋  |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a  href="#">包包 |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a href="#">美妆 |</a></li>
                <li  style="margin-left:50px;font-size:18px;margin-top:15px;" class="fl" ><a  href="#">男友  |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a href="#">生活  |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a  href="#">内衣   |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a href="#">运动  |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a  href="#">配饰 |</a></li>
                <li  style="margin-left:50px;font-size:18px;margin-top:15px;" class="fl" ><a href="#">食品  |</a></li>
                <li style="margin-left:50px;font-size:18px;margin-top:15px;"class="fl"><a href="#">母婴  |</a></li>


            </ul>

        </div>




    </div>

    <div class="four">
        <div class="a1">
            <figure>
                <a href="http://localhost:63342/%E8%98%91%E8%8F%87%E8%A1%972/index5(%E5%8D%95%E5%93%81).html">
                    <img src="img/93.jpg" alt=""></a>
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥29
                        <input style="width:60px;height:15px;margin-left:70px;border-radius:5px;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/>
                    </h4>
                    <p>新款弹力显瘦高腰外穿打底裤 </p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售3245 <a style="margin-left:40px" href="">2天17小时后结束</a></p>

                </figcaption>
            </figure>

        </div>
        <div class="b">
            <figure>
                <img src="img/94.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥29.1
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/>
                    </h4>
                    <p>韩版经典条纹T恤 </p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售7865<a style="margin-left:40px" href="">2天17小时后结束</a> </p>

                </figcaption>
            </figure>

        </div>

        <div class="c">
            <figure>
                <img src="img/95.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥69.97
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/>
                    </h4>
                    <p>复古印花老花锁扣迷你手提斜挎包</p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售553<a style="margin-left:40px" href="">2天17小时后结束</a></p>
                </figcaption>
            </figure>

        </div>

        <div class="d">
            <figure>
                <img src="img/96.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥30
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/>
                    </h4>
                    <p>韩国螺纹领字母撞色棒球T恤 </p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售2584<a style="margin-left:40px" href="">2天17小时后结束</a></p>
                </figcaption>
            </figure>

        </div>

        <div class="e">
            <figure>
                <img src="img/97.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥37.05
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/>
                    </h4>
                    <p>甜美气质一字领短款雪纺衫 </p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售1193 <a style="margin-left:40px" href="">2天17小时后结束</a></p>
                </figcaption>
            </figure>

        </div>

        <div class="f">
            <figure>
                <img src="img/98.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥29
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/>
                    </h4>
                    <p>松紧腰 舒适 雪纺纠纷哈伦裤新款</p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售3245  <a style="margin-left:40px" href="">2天17小时后结束</a></p>
                </figcaption>
            </figure>

        </div>
        <div class="g">
            <figure>
                <img src="img/99.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥29.1
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/>
                    </h4>
                    <p>韩版经典条纹T恤 </p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售7865 <a style="margin-left:40px" href="">2天17小时后结束</a> </p>
                </figcaption>
            </figure>

        </div>

        <div class="h">
            <figure>
                <img src="img/100.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥51
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/>
                    </h4>
                    <p>买一送一@送同款</p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售553<a style="margin-left:40px" href="">2天17小时后结束</a></p>
                </figcaption>
            </figure>

        </div>

        <div class="I">
            <figure>
                <img src="img/101.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥49.29
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/></h4>
                    <p>新款韩版简约复古包包 </p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售2584<a style="margin-left:40px" href="">2天17小时后结束</a></p>
                </figcaption>
            </figure>

        </div>

        <div class="j">
            <figure>
                <img src="img/102.jpg" alt="">
                <figcaption style="position:absolute;top:280px;left:5px;margin-top:10px;">
                    <h4 style="font-size:25px;color:deeppink;margin-top:10px;">￥44.09
                        <input style="width:60px;height:15px;margin-left:60px;border-radius:5px;top:10px;position:absolute;
                        border:1px solid deeppink;color:deeppink;" type="text" value="立省49"/></h4>
                    </h4>
                    <p>林允儿同款鞋子 </p>
                    <div style="border-top:1px silver dashed;margin-top:10px;"></div>
                    <p style="margin-top:10px;">已售1193<a style="margin-left:40px" href="">2天17小时后结束</a> </p>
                </figcaption>
            </figure>

        </div>



    </div>



    <div class="footer-1" style="position:absolute;width:100%;height:280px;top:2000px;border:1px solid #ccc;">
        <div class="footer-1-in">
            <div class="f0">
                <img style="position:absolute;top:50px;left:400px;"src="img\2.png" alt=""/>
                <ul style="position:absolute;top:110px;left:400px;">

                    <li>营业执照注册号：331006000129004</li>
                    <li></li>增值电信业务经营许可证：浙B2-20110349</li>
                    <li >浙公网安备：331006000129004</li>
                    <li>@2016 Mogujie.com 杭州卷瓜网络有限公司</li>

                </ul>


            </div>
            <dl class=" fl fore1" style="left:800px;position:absolute;top:50px;">
                <dt>
                    <b></b>
                    <strong>公司</strong>
                </dt>
                <dd>
                    <div><a href="#">关于我们</a></div>
                    <div><a href="#">招聘信息</a></div>
                    <div><a href="#">联系我们</a></div>

                </dd>
            </dl>
            <dl class="fl fore2" style="left:1000px;position:absolute;top:50px;">
                <dt>
                    <b></b>
                    <strong>消费者</strong>
                </dt>
                <dd>
                    <div><a href="#">消费者服务</a></div>
                    <div><a href="#">意见反馈</a></div>
                    <div><a href="#">手机版下载</a></div>

                </dd>
            </dl>
            <dl class="fl fore3" style="left:1200px;position:absolute;top:50px;">
                <dt>
                    <b></b>
                    <strong>商家</strong>
                </dt>
                <dd>
                    <div><a href="#">商家入驻</a></div>
                    <div><a href="#">商家后台</a></div>
                    <div><a href="#">蘑菇街学院</a></div>
                    <div><a href="#">商家社区</a></div>

                </dd>
            </dl>


            <div class="fr peisong" style="left:1400px;position:absolute;top:50px;">

                <div class="peisong-top"><h3>权威认证</h3></div>
                <div class="peisong-content">

                </div>
            </div>
            <span class="clr"></span>
        </div>
    </div>
    <div class="footer-2"  style="position:absolute;top:2200px;left:500px;">
        <div class="footer-2-in">
            <div class="links">
                <a href="#">友情链接：</a>
                <a href="#">蘑菇街游戏</a>
                <a href="#">淘粉吧</a>
                <a href="#">穿衣搭配</a>
                <a href="#">蘑菇街男装</a>
                <a href="#">蘑菇街鞋子</a>
                <a href="#">蘑菇街包包</a>
                <a href="#">QQ钱包</a>
                <a href="#">家居网</a>
                <a href="#">时尚品牌网</a>
                <a href="#">装修</a>
                <a href="#">蘑菇街母婴</a>
                <a href="#">衣联网</a>
                <a href="#">播视网视屏</a>
                <a href="#">慧聪网</a>

            </div>




   </div>
 </div>

</div>





</body>
</html>
<script>

    $(function(){
        $('.drop-contentb').css('display','none')
        $('.drop-contentc').css('display','none')
        $('.drop-contentd').css('display','none')
        $('.a').hover(function(){
            $('.drop-contentb').css('display','block')
        },function(){
            $('.drop-contentb').css('display','none')
        })

        $('.jiamiao123').hover(function(){
            $('.drop-contenta').css('display','block')
        },function(){
            $('.drop-contenta').css('display','none')
        })

        $('.kehu').hover(function(){
            $('.drop-contentc').css('display','block')
        },function(){
            $('.drop-contentc').css('display','none')
        })


        $('.xiaodian').hover(function(){
            $('.drop-contentd').css('display','block')
        },function(){
            $('.drop-contentd').css('display','none')
        })
    })





    window.onload = function(){
        //第一步，选取要操作的元素
        var box = document.querySelectorAll('#box')[0];
        var oUl = document.querySelectorAll('.list')[0];
        var aLi = document.querySelectorAll('.list li');
        var aImg = document.querySelectorAll('img');
        var aNum = document.querySelectorAll('.count li');
        var index = 0;
        var timer = dd = null;
        var opa = 0;



        //先写手动的
        for(var i=0;i<aNum.length;i++){
            //先把下标存储一下
            aNum[i].index = i;
            aNum[i].onmouseover = function(){
                show(this.index);
            }
        }
        function show(a){
            //当前图片显示的时候，那么，其余的图片应该都是隐藏状态吧
            //这里，要改变下index的当前值就好了
            index = a;
            for(var i=0;i<aLi.length;i++){
                aLi[i].style.opacity = 0;
                aNum[i].className = '';

            }
            //让当前的图片显示
            aNum[a].className = 'current';
            aLi[a].style.opacity = 1;
            /*dd = setInterval(function(){
             opa  = opa + 2;
             aLi[index].style.opacity = opa / 100;
             if(opa == 100){
             opa = 0;
             clearInterval(dd);
             }
             },10);*/
        }


        //再写自动的
        function autoplay(){
            /*clearInterval(dd);*/
            timer = setInterval(function(){
                index++;
                if(index >= aLi.length){
                    index = 0;
                }
                console.log(index);
                show(index);
            },1000)
        }
        autoplay();

        //当鼠标移入这个box的时候，这个autoplay停止,移出的时候继续

        box.onmouseover = function(){
            clearInterval(timer);

        }
        box.onmouseout = function(){
            autoplay();
        }





    }
</script>